{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}} - User API Keys</title>
{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-10 mx-auto">
                <div class="card my-5">
                    <h5 class="card-header text-white bg-dark mb-3">
                        API Keys
                    </h5>
                    <div class="card-body text-left">
                        <div class="card-text">
                            {% for key in apikeys %}
                            <form action="/settings/api/delete" method="post">
                                <div class="form-row">
                                    <div class="form-group col-lg-3">
                                        <label class="form-check-label" for="keyname-{{key.id}}"><i class="fas fa-hashtag"></i> Key Name </label>
                                        <input type="text" name="name" id="keyname-{{key.id}}" class="form-control" value="{{key.description}}" readonly>
                                    </div>
                                    <div class="form-group col-lg-3">
                                        <label class="form-check-label" for="apikey-{{key.id}}"><i class="fas fa-key"></i> API Key </label>
                                        <div class="input-group">
                                            <input type="text" name="key" id="apikey-{{key.id}}" class="form-control" value="{{key.key}}" readonly>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-primary mb-2" onclick="CopyAPI('apikey-{{key.id}}')"><i class="fas fa-copy"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-2">
                                        <label class="form-check-label" for="created-{{key.id}}"><i class="fas fa-calendar-alt"></i> Created </label>
                                        <input type="text" name="createdDate" id="created-{{key.id}}" class="form-control" value="{{key.createdOn|normalize_date}}" disabled>
                                    </div>
                                    <div class="form-group col-lg-2">
                                        <label class="form-check-label" for="expires-{{key.id}}"><i class="fas fa-calendar-times"></i> Expires </label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    {% if key.isValid() %}<i style="color:green;" class="fas fa-check"></i>
                                                    {% else %} <i style="color:red;" class="fas fa-times"></i>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <input type="text" name="expirationDate" id="expires-{{key.id}}" class="form-control" value="{{key.expiration|normalize_date}}" disabled>
                                        </div>
                                    </div>
                                    <div class="form-group col-lg-1">
                                        <label class="form-check-label" for="hiddenAnchorForButton-{{key.id}}"><i class="fas fa-cog"></i> Options </label>
                                        <div class="input-group">
                                            <input type="hidden" id="hiddenAnchorForButton-{{key.id}}" class="form-control">
                                            <div>
                                                <button type="submit" class="btn btn-danger mb-2" id="submit-{{key.id}}"><i class="fas fa-trash-alt"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <hr>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="card my-5">
                    <h5 class="card-header text-white bg-dark mb-3">
                        Create a New Key
                    </h5>
                    <div class="card-body text-left">
                        <div class="card-text">
                            <form action="/settings/api/new" method="post">
                                <div class="form-row align-items-center">
                                    <div class="form-group col-lg-3">
                                        <label class="form-check-label" for="keyname"><i class="fas fa-hashtag"></i> Key Name </label>
                                        <input type="text" name="keyName" id="keyName" class="form-control" required>
                                    </div>
                                    <div class="form-group col-lg-3">
                                        <label class="form-check-label" for="expires"><i class="fas fa-calendar-alt"></i> Days Key Valid </label>
                                        <input type="number" name="expiration" id="expires" class="form-control" min="0" placeholder="Set to 0 to not expire" required>
                                    </div>
                                    <div class="form-group col-lg-1">
                                        <label class="form-check-label" for="hiddenAnchorForButton"><i class="fas fa-cog"></i> Options </label>
                                        <div class="input-group">
                                            <input type="hidden" id="hiddenAnchorForButton" class="form-control">
                                            <div>
                                                <button type="submit" class="btn btn-success mb-2" id="newKey"><i class="fas fa-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    function CopyAPI(divVal) {
      var copyText = document.getElementById(divVal);
      copyText.select();
      document.execCommand("copy");
    }
</script>

</script>
{% endblock %}